<app-header>
	<div header-title>
		Tracks
	</div>

	<div header-actions class="actions">
		<div class="action" appRipple [dropdownTriggerFor]="dropdown">
			<i class="ph-funnel"></i>
		</div>


	</div>

	<app-dropdown [closeOnClick]="false" #dropdown>
		<div class="dropdown-item" (click)="onSort('name')">Sort by name</div>
		<div class="dropdown-item" (click)="onSort('created_at')">Sort by date</div>
		<div class="dropdown-item" (click)="onLiked()">Favourites</div>

		<div class="filters">

			<div class="filter">
				<label>Genre</label>
				<select [(ngModel)]="filter.genre" (ngModelChange)="onFilter()">

					<option value="">All</option>
					<option *ngFor="let genre of genres" [value]="genre._id">{{ genre.name }}</option>
				</select>
			</div>


			<div class="filter small">
				<label>Limit</label>

				<select [(ngModel)]="filter.limit" (ngModelChange)="onFilter()">
					<option *ngFor="let limit of limits" [value]="limit">{{ limit }}</option>
				</select>
			</div>


		</div>
	</app-dropdown>
</app-header>




<div *ngIf="tracks.length > 0" appInfiniteScroll [scrollPercent]="70" [immediateCallback]="true"
	[scrollCallback]="scrollCallback" class="tracks">


	<ng-container *ngFor="let track of tracks; ">
		<app-track-item id="{{track._id}}" [track]="track"></app-track-item>

	</ng-container>
</div>

<!--div appInfiniteScroll [scrollPercent]="70" [immediateCallback]="true" [scrollCallback]="scrollCallback">



	<app-track-item [track]="track" *ngFor="let track of tracks; "></app-track-item>
</div-->
<!--virtual-scroller [checkResizeInterval]="200" (vsEnd)="onScroll($event)" #scroll [items]="tracks"
	[ngStyle]="{'height.px': (hostHeight$ | async)- 105 }">


	<div *ngFor="let track of scroll.viewPortItems; ">
		<app-track-item  [track]="track"></app-track-item>
	</div>
</virtual-scroller-->